/**
 * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Modal, Form, Select, Input, message } from 'antd';
import { http, includes } from 'libs';
import store from './store';
import rStore from '../role/store';
import request from '../../../libs/request';

export default observer(function () {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [contacts, setContacts] = useState([])

  useEffect(() => {
    request.get('/api/v1/locker/roles')
      .then(res => setContacts(res.data))
  }, []);

  function handleSubmit() {
    setLoading(true);
    const formData = form.getFieldsValue();
    formData.id = store.record.id;
    if (store.record.id) {
      request({ url: '/api/v1/locker/users/' + store.record.id, data:formData, method: "put" })
        .then(() => {
          message.success('操作成功');
          store.formVisible = false;
          store.fetchRecords()
        }, () => setLoading(false))
    } else {
      request({ url: '/api/v1/locker/users', data:{...formData,note:""}, method: "POST" })
        .then(() => {
          message.success('操作成功');
          store.formVisible = false;
          store.fetchRecords()  
        }, () => setLoading(false))
    }



  }

  return (
    <Modal
      visible
      width={700}
      maskClosable={false}
      title={store.record.id ? '编辑账户' : '新建账户'}
      onCancel={() => store.formVisible = false}
      confirmLoading={loading}
      onOk={handleSubmit}>
      <Form form={form} initialValues={store.record} labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}>
        <Form.Item required name="username" label="登录名">
          <Input placeholder="请输入登录名" />
        </Form.Item>
        <Form.Item required name="real_name" label="姓名">
          <Input placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item required hidden={store.record.id} name="password_hash" label="密码"
          extra="至少8位包含数字、小写和大写字母。">
          <Input.Password placeholder="请输入密码" />
        </Form.Item>
        <Form.Item hidden={store.record.is_supper} label="角色" style={{ marginBottom: 0 }}>
          <Form.Item name="role_id" style={{ display: 'inline-block', width: '80%' }}
            extra="权限最大化原则，组合多个角色权限。">
            <Select placeholder="请选择">
              {contacts.map(item => (
                <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item style={{ display: 'inline-block', width: '20%', textAlign: 'right' }}>
            <Link to="/system/role">新建角色</Link>
          </Form.Item>
        </Form.Item>

      </Form>
    </Modal>
  )
})
